<template>
	<view class="main">
		<view class="header">
			<view class="header_title">#办公常用#</view>
		</view>
		<view class="list">
			<view class="list_item" v-for="(item, index) in list" :key="index" @click="goDetails(item)">
				<image class="icon" v-if="item.type == 'WORD'" src="/static/img/model/word_icon.png"></image>
				<image class="icon" v-if="item.type == 'PPT'" src="/static/img/model/ppt_icon.png"></image>
				<image class="icon" v-if="item.type == 'EXCEL'" src="/static/img/model/exl_icon.png"></image>
				<image class="icon" v-if="item.type == 'PDF'" src="/static/img/model/pdf_icon.png"></image>
				<image class="icon" v-if="item.type == 'ZIP'" src="/static/img/model/zip_icon.png"></image>
				<view class="list_title">{{ item.title }}</view>
			</view>
		</view>
	</view>
</template>

<script type="text/javascript" src="plus-confusion://../pages/model/work/index"></script>

<style lang="scss" scoped>
.main {
	.header {
		margin: 0 auto;
		// margin-top: 42rpx;
		width: 690rpx;
		height: 169rpx;
		background-image: url("/static/img/model/work_header.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;

		.header_title {
			padding: 40rpx 0 0 47rpx;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 40rpx;
		}
	}

	.list {
		padding: 0 30rpx;
		margin-top: 20rpx;

		.list_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 37rpx 0;
			border-bottom: 1rpx solid #E7E7E7;

			.icon {
				width: 38rpx;
				height: 36.5rpx;
			}

			.list_title {
				width: calc(100% - 50rpx);
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
				white-space: normal;
				font-size: 28rpx;
				line-height: 30rpx;
				color: #333333;
				line-height: 24rpx;
			}
		}
	}
}
</style>
